<template>
  <div class="work">
    <div class="work-head">
      <el-menu
        :router="true"
        default-active="/happyhome/work/notepad"
        class="work-heads"
      >
        <el-menu-item
          index="/happyhome/work/notepad"
          class="notepadActive SecondTitlePos"
        >
          <span slot="title" @mousedown="moveTitle">记事本</span>
        </el-menu-item>
        <el-menu-item
          index="/happyhome/work/revenueinfo"
          class="SecondTitlePos"
        >
          <span slot="title" @mousedown="moveTitle">收入信息</span>
        </el-menu-item>
        <el-menu-item index="/happyhome/work/clocks" class="SecondTitlePos">
          <span slot="title" @mousedown="moveTitle">工作打卡</span>
        </el-menu-item>
        <el-menu-item index="/happyhome/work/navigation" class="SecondTitlePos Navigator">
          <span slot="title" @mousedown="moveTitle">导航</span>
        </el-menu-item>
      </el-menu>
      <br /><br /><br />
      <hr />
    </div>
    <RouterView></RouterView>
  </div>
</template>
<script>
import axios from 'axios';
export default {
  data() {
    return {
      SecondTitle: ["30px", "150px", "270px", "390px"],
      disX: 0,
      // disY: 0,
      // disYY: 0,
      disXX: 0,
      oDiv: "",
      positionI: -1,
      keydownn:3,
      talkId:-1,
      power:''
    };
  },
  mounted() {
    document.querySelector(".notepadActive").click();
    let who=sessionStorage.getItem('userId')
    axios({
      url:'/dbdata/secondTitle/'+who+'',
    }).then((res)=>{
      this.SecondTitle=res.data.work;
      this.positionStep1();
    })
    document.addEventListener('keydown',this.moveTitleFunc1);
    document.addEventListener('keyup',this.moveTitleFunc2)
    this.talkId=sessionStorage.getItem('userId')
    this.seeMassageFunc=setInterval(this.seeMassage,1000*10)
  },
  methods: {
    seeMassage(){
      console.log("消息监控中");
        axios({ url: "/dbdata/userTalk/" + this.talkId + "" }).then(({ data }) => {
      this.massageCountOffline = data.massageCount;
      sessionStorage.setItem(
              "massageOffline",
              Number(this.massageCountOffline)
            );
      axios({ url: "/dbdata/userTalkDetail/" + this.talkId + "" }).then(
        ({ data }) => {
          if (this.massageCountOffline < data.talkDetail.length) {
            let n1 = data.talkDetail.length - this.massageCountOffline;
            this.$store.commit('changeMassageAll',n1);
          }
        }
      );
    });
    },
    moveTitleFunc1(){
      this.keydownn=1;
    },
    moveTitleFunc2(){
      this.keydownn=0;
    },
    moveTitle() {
      if(this.keydownn==1){
        this.oDiv = event.target.parentNode;
      this.disX = event.offsetX;
      this.disXX = event.pageX;
      console.log(event.pageX - this.disX - 200);
      this.oDiv.style.zIndex = "10";
      this.SecondTitle.forEach((v, i) => {
        if (v == event.target.parentNode.style.left) {
          this.positionI = i;
        }
      });     
      this.SecondTitle.splice(this.positionI, 1, "xxx");
          let Secondd = ["30px", "150px", "270px"]; 
          let nn = 0;
          this.SecondTitle.forEach((v, i) => {
            if (v != "xxx") {
              this.SecondTitle.splice(i, 1, Secondd[nn]);
              nn++;
            }
          });
          this.positionStep1();
      document.addEventListener("mousemove", this.moveTitleAction);
      document.addEventListener("mouseup", this.stopmove);
      }
    },
    stopmove() {
      this.oDiv.style.pointerEvents=null
      
      document.removeEventListener("mousemove", this.moveTitleAction);
      let positionThis = 0;
      if (event.pageX - this.disX - 200 < 30) {
        positionThis = "30px";
      } else if (
        event.pageX - this.disX - 200 >= 30 &&
        event.pageX - this.disX - 200 < 150
      ) {
        positionThis = "150px";
      } else if (
        event.pageX - this.disX - 200 >= 150 &&
        event.pageX - this.disX - 200 < 270
      ) {
        positionThis = "270px";
      } else {
        positionThis = "390px";
      }
      console.log(this.SecondTitle);
      this.SecondTitle.forEach((v, j) => {
        if (parseInt(v.split("p")[0]) >= parseInt(positionThis.split("p")[0])) {
          let changedPosition =
            parseInt(this.SecondTitle[j].split("p")[0]) + 120;
          this.SecondTitle.splice(j, 1, changedPosition + "px");
        }
      });
      this.SecondTitle.splice(this.positionI, 1, positionThis);
      console.log(this.SecondTitle);
      this.positionStep1();
      this.oDiv.style.zIndex = "1";
      document.removeEventListener("mouseup", this.stopmove);
      let who=sessionStorage.getItem('userId')
      axios({
        url:'/dbdata/secondTitle/'+who+'',
        method:'patch',
        data:{
          work:this.SecondTitle
        }
      })
    },
    moveTitleAction() {
      this.oDiv.style.pointerEvents='none';
      let l = event.pageX - this.disX - 200;
      this.oDiv.style.left = l + "px";
    },
    positionStep1() {
      let SecondTitlePos = document.querySelectorAll(".SecondTitlePos");
      SecondTitlePos.forEach((v, i) => {
        if (v != "xxx") {
          v.style.position = "absolute";
          v.style.left = this.SecondTitle[i];
          v.style.top = "3px";
        }
      });
    },
  },
  destroyed(){
    clearInterval(this.seeMassageFunc)
  }
};
</script>
<style scoped lang="less">
body,
html,
.work {
  height: 100%;
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
.work-head {
  .work-heads {
    .el-menu-item {
      float: left;
      padding: 0px 10px !important;
      margin: 0px !important;
      span {
        margin: 0px !important;
      }
      span {
        display: inline-block;
        line-height: 40px;
        background-color: rgb(255, 255, 255);
        border: 1px solid #e4d7d7;
        width: 100px;
        cursor: pointer;
      }
    }
  }
}
</style>
